import React, { type ReactElement, useState } from 'react'
import { Col, Row, Slider, Flex, Popover, List, theme, Switch, ConfigProvider } from 'antd'
import { CloseIcon, DeleteIcon, DownLoadIcon, ListIcon, LyricIcon, ModeIcon, NextIcon, OffScreenIcon, PauseIcon, PlayIcon, PrevIcon, VolumeIcon, WavesIcon } from './Icon'
import { type ControlPanelProps } from 'src/interface'
import musicJpg from '../music.jpg'

function BottomControlPanel (props: ControlPanelProps): ReactElement {
  const {
    token: { colorBgContainer, colorFillSecondary }
  } = theme.useToken()
  const audio = props.audio
  const iconColor = props.iconColor
  const [audioListPopoverOpen, setAudioListPopoverOpen] = useState(false)

  const audioListItemHandleClick = (index: number): void => {
    if (props.audioIndex === index && props.playing) {
      props.onPause()
    } else {
      props.onPlayAudio(index)
    }
  }

  return (
    <div className="bottom-panel" style={{ backgroundColor: colorBgContainer }}>
      <Row className="bottom-panel-content" align="middle" justify="center" gutter={32} wrap={false}>
        <Col flex={1}></Col>
        <Col>
          <div className="pic">
            <img src={audio.pic ?? props.defaultAudioPic ?? musicJpg} alt="pic" />
          </div>
        </Col>
        <Col flex="1 300px">
          <Flex vertical justify="space-between" className="info">
            <Flex justify="space-between">
              <div>
                {audio.name.length > 0 ? <span className="name" >{audio.name}</span> : ''}
                {audio.author.length > 0 ? <span className="author" >{' - ' + audio.author}</span> : ''}
              </div>
              <div className="time">
                <span>{props.currentTime}</span>
                <span> / </span>
                <span>{props.durationTime}</span>
              </div>
            </Flex>
            <Slider disabled={props.error} min={0} max={1} step={0.01} value={props.playerSliderValue} className="player-slider" onChangeComplete={props.onChangeCompletePlayerSlider} onChange={props.onChangePlayerSlider} tooltip={{ open: false }} keyboard={false} />
          </Flex>
        </Col>
        <Col>
          <div className="icon" onClick={props.onPlayPrev}>
            <PrevIcon fill={iconColor} icons={props.playerIcons} />
          </div>
        </Col>
        <Col>
          {props.playing
            ? <div className="icon" onClick={props.onPause}>
              <PauseIcon fill={iconColor} icons={props.playerIcons} />
            </div>
            : <div className="icon" onClick={props.onPlay}>
              <PlayIcon fill={iconColor} icons={props.playerIcons} />
            </div>
          }
        </Col>
        <Col>
          <div className="icon" onClick={props.onPlayNext}>
            <NextIcon fill={iconColor} icons={props.playerIcons} />
          </div>
        </Col>
        <Col>
          <div className="icon" onClick={props.onChangePlayMode}>
            <ModeIcon fill={iconColor} icons={props.playerIcons} playMode={props.playMode} />
          </div>
        </Col>
        <Col>
          <div className="icon" onClick={(e) => { props.onDownLoad(props.audioIndex, e) }} >
            <DownLoadIcon fill={iconColor} icons={props.playerIcons} />
          </div>
        </Col>
        <Col>
          <div className="icon" >
            <ConfigProvider wave={{ disabled: true }}>
              <Switch checkedChildren="L" unCheckedChildren="D" size="small" checked={props.playerTheme === 'light'} onChange={props.onChangePlayTheme} />
            </ConfigProvider>
          </div>
        </Col>
        <Col>
          <Flex align="center">
            <div className="icon" onClick={props.onClickVolume}>
              <VolumeIcon fill={iconColor} icons={props.playerIcons} volume={props.volumeSliderValue} />
            </div>
            <Slider min={0} max={1} step={0.01} value={props.volumeSliderValue} className="volume-slider" onChange={props.onChangeVolumeSlider} tooltip={{ open: false }} keyboard={false} />
          </Flex>
        </Col>
        <Col>
          <div className="icon" onClick={props.onShowLyric}>
            <LyricIcon fill={iconColor} icons={props.playerIcons} show={props.showLyric} />
          </div>
        </Col>
        <Col>
          <Popover
            trigger="click"
            getPopupContainer={(element) => element}
            placement="topRight"
            open={audioListPopoverOpen}
            onOpenChange={setAudioListPopoverOpen}
            title={
              <Flex justify="space-between" align="center">
                <span className="audio-list-title">{'播放队列 / ' + props.audioList.length}</span>
                <Flex gap="middle">
                  <div className="icon" onClick={props.onClearAudioList}>
                    <DeleteIcon fill={iconColor} icons={props.playerIcons} />
                  </div>
                  <div className="line-icon"></div>
                  <div className="icon" onClick={() => { setAudioListPopoverOpen(false) }}>
                    <CloseIcon fill={iconColor} icons={props.playerIcons} size={16} />
                  </div>
                </Flex>
              </Flex>
            }
            content={
              <List
                size="small"
                className="audio-list-content"
                dataSource={props.audioList}
                renderItem={(item, index) =>
                  <List.Item style={{
                    backgroundColor: props.audioIndex === index ? colorFillSecondary : '',
                    color: props.audioIndex === index ? '#0EAD51' : ''
                  }} className="audio-list-item" onClick={() => { audioListItemHandleClick(index) }}>
                    <Row style={{ width: '100%' }}>
                      <Col span={2} className="number">
                        {
                          props.audioIndex === index && props.playing ? <WavesIcon fill={iconColor} icons={props.playerIcons} /> : <span>{index + 1}</span>
                        }
                      </Col>
                      <Col span={14} className="name">
                        <Flex justify="space-between">
                          <span>{item.name}</span>
                          <Flex className="menu" justify="space-evenly">
                            <div className="icon" onClick={(e) => { props.onDownLoad(index, e) }}>
                              <DownLoadIcon fill={iconColor} icons={props.playerIcons} size={16} />
                            </div>
                            <div className="icon" onClick={(e) => { props.onRemoveAudioIndex(index, e) }}>
                              <DeleteIcon fill={iconColor} icons={props.playerIcons} />
                            </div>
                          </Flex>
                        </Flex>
                      </Col>
                      <Col span={5} className="author">{item.author}</Col>
                      <Col span={3} className="time">{item.time}</Col>
                    </Row>
                  </List.Item>
                }
              />

            }>
            <div>
              <div className="icon">
                <ListIcon fill={iconColor} icons={props.playerIcons} />
              </div>
            </div>
          </Popover>
        </Col>
        <Col>
          <div className="icon" onClick={() => { props.onChangePanelMode('mini') }}>
            <OffScreenIcon fill={iconColor} icons={props.playerIcons} />
          </div>
        </Col>
        {/* <Col>
            <FullScreen className="icon" size="24" fill="#333" />
          </Col> */}
        <Col>
          <div className="icon" onClick={props.onClose}>
            <CloseIcon fill={iconColor} icons={props.playerIcons} />
          </div>
        </Col>
        <Col flex={1}></Col>
      </Row>
    </div>

  )
}

export default BottomControlPanel
